<!-- 溯源记录-基本信息 -->
<template>
	<view>
		<view class="image-container">
		  <image :src=img class="animal-image"></image>
		</view>	
		<!-- 牲畜编号 -->
		<view class="info-title">
		  <text class="title-text">牛的编号</text>
		</view>
	</view>
	<!-- 信息标题列表0 -->
	<info-title-list :infoTitleList="animalInfoList0"></info-title-list>
	<!-- 设备信息 -->
	<device-info :deviceInfoList="animalInfoList1"></device-info>
	 <!-- 信息标题列表 -->
	 <info-title-list :infoTitleList="animalInfoList"></info-title-list>
	<!-- 牲畜信息 -->
	<animal-info :animalInfo="animalInfoList2"></animal-info>
</template>

<script setup>
import InfoTitleList from '@/components/Animals/InfoTitleList.vue';
import img from '/static/imgs/raw.png';
import DeviceInfo from '@/components/Animals/DeviceInfo.vue';
import AnimalInfo from '@/components/Animals/AnimalInfo.vue';
import { getCattleDetail } from '@/api/livestock';
import { ref, onMounted } from 'vue';

// 获取 Storage 中的 F_Id
const getFIdFromStorage = () => {
  const fId = uni.getStorageSync('F_Id');
  console.log('从 Storage 获取的 F_Id:', fId);
  return fId || null;
};

// 信息标题列表数据
const animalInfoList0 = ref([
  {
    title: '设备信息'
  }
]);

const animalInfoList = ref([
  {
    title: '牲畜信息'
  }
]);

// 设备信息数据
let animalInfoList1 = ref([
  // 默认数据，稍后会被接口数据覆盖
  {
    title: '智能耳标',
    type: 'IMEI',
    battery: ''
  },
  {
    title: '智能项圈',
    type: 'IMEI',
    battery: ''
  }
]);

// 牲畜信息数据
let animalInfoList2 = ref([
  // 默认数据，稍后会被接口数据覆盖
  { title: '牲畜种类', type: '' },
  { title: '品种', type: '' },
  { title: '性别', type: '' },
  { title: '出生日期（打标）', type: '' },
  { title: '出生地', type: '' },
  { title: '生长环境', type: '' },
  { title: '年龄', type: '' },
  { title: '出生体重', type: '' }, // 新增字段
  { title: '当前体重', type: '' }, // 新增字段
  { title: '当前状态', type: '' },
  { title: '是否繁殖', type: '' },
  { title: '是否绝育', type: '' },
  { title: '体重指标', type: '' } // 新增字段
]);

// 获取牲畜详细信息
const fetchCattleDetail = async () => {
  const fId = getFIdFromStorage();
  if (!fId) {
    console.error('F_Id 不存在，无法获取牲畜详细信息');
    return;
  }

  try {
    // 调用接口获取数据
    const response = await getCattleDetail({ id: fId });
    console.log('获取到的牲畜详细信息:', response);

    if (response.code === 200) {
      // 更新界面数据
      updateUIWithData(response.data);
    } else {
      console.error('获取牲畜详细信息失败:', response.msg);
    }
  } catch (error) {
    console.error('获取牲畜详细信息时发生错误:', error);
  }
};

// 使用获取到的数据更新界面
const updateUIWithData = (data) => {
  console.log('更新界面数据:', data);

  // 更新设备信息
  animalInfoList1.value = [
    {
      title: '智能耳标',
      type: data.eartag && data.eartag.length > 0 ? `IMEI ${data.eartag[0].F_IMEI}` : '无数据',
      battery: data.eartag && data.eartag.length > 0 ? `${data.eartag[0].F_Quantity}%` : '无数据'
    },
    {
      title: '智能项圈',
      type: data.necklace && data.necklace.length > 0 ? `IMEI ${data.necklace[0].F_IMEI}` : '无数据',
      battery: data.necklace && data.necklace.length > 0 ? `${data.necklace[0].F_Quantity}%` : '无数据'
    }
  ];

  // 更新牲畜信息
  const cowInfo = data.cowinfo[0];
  animalInfoList2.value = [
    { title: '牲畜种类', type: cowInfo.type },
    { title: '品种', type: cowInfo.F_Type_Id },
    { title: '性别', type: cowInfo.F_Sex === 1 ? '公' : '母' },
    { title: '出生日期（打标）', type: new Date(cowInfo.F_Birthday).toLocaleDateString() },
    { title: '出生地', type: '兰蓝牛场' }, // 固定值
    { title: '生长环境', type: '兰蓝牛场' }, // 固定值
    { title: '年龄', type: cowInfo.brithday },
    { title: '出生体重', type: `${cowInfo.F_Csweight}KG` }, // 从接口获取
    { title: '当前体重', type: `${cowInfo.F_Weight}KG` }, // 从接口获取
    { title: '当前状态', type: cowInfo.F_State === 1 ? '异常' : '健康' },
    { title: '是否繁殖', type: '是' }, // 固定值
    { title: '是否绝育', type: '否' }, // 固定值
    { title: '体重指标', type: getWeightStatus(cowInfo.tzzb) } // 根据接口数据映射
  ];
};

// 体重指标映射函数
const getWeightStatus = (status) => {
  const statusMap = {
    1: '正常',
    2: '偏胖',
    3: '偏瘦'
  };
  return statusMap[status] || '未知状态';
};

// 页面加载时获取牲畜详细信息
onMounted(() => {
  fetchCattleDetail();
});
</script>

<style scoped lang="scss">




.image-container {
  width: 100%;
  height: 600rpx;
    .animal-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
}
.info-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
  font-size: 36rpx;
  font-weight: bold;
  padding:  0rpx 20rpx;
  margin-bottom:20rpx;
}
</style>